<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>42区集图设置</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<script type="text/javascript">
function save(){
	var cb1 = document.getElementById('hidedirpic'),
		cb2 = document.getElementById('showhow'),
		radio = document.getElementsByName("picsize"),
		hint = document.getElementById("hint"),
		picsize;
　　for(var i=0;i<radio.length;i++){
		if(radio[i].checked){
			picsize = radio[i].value;
		}
　　}
	var data = {
		'hidedirpic' : cb1.checked ? '1' : '0',
		'showhow' : cb2.checked ? '1' : '0',
		'picsize' : picsize
	}
	chrome.extension.sendRequest({'msg':'save_option_data','option_data':JSON.stringify(data)})
	shine(hint)
}

function shine(elem){
	function show1(){
		elem.style.display = 'inline-block'
	}
	function show2(){
		elem.style.display = "none"
		setTimeout(show1,100)
	}
	setTimeout(show2,50)
}

function restore(){
	var h = localStorage['hidedirpic'],
		s = localStorage['showhow'],
		p = localStorage['picsize'],
		cb1 = document.getElementById('hidedirpic'),
		cb2 = document.getElementById('showhow'),
		radio = document.getElementsByName("picsize")
	if(h == '1' || h==null) cb1.checked = true
	if(s == '1' || s==null) cb2.checked = true;
	if(p!=null){
		for(var i=0;i<radio.length;i++){
			if(radio[i].value==p){
				radio[i].checked = true
			}
		}
	}else{
		radio[0].checked = true
	}
	get_account_from_local()
}

function get_account_from_local(){
	chrome.extension.sendRequest(
		{msg: 'get_account'}, 
		function(response){
			var user = response.user;
			if(user){
				user = JSON.parse(user)
				$('#now_account').html('<a class="now_account_a" href="http://'+user.f2qu_user_id+'.42qu.com" target="_blank">'+user.f2qu_user_name+'</a>')
			}else{
				$('#now_account').html('<a class="now_account_a" href="http://42qu.com/auth/login" target="_blank">未登录 , 请点此登录</a>')
			}
		}
	);
}

function get_account(){
	$.getJSON('http://api.42qu.com/user/oauth/login?client_secret=1f082771f7c940849f6fd02ba5d3519f&client_id=10046352', function(r){
		if(r && r.access_token){
			var f2qu_user_info = {
				"f2qu_token":r.access_token,
				"f2qu_user_id":r.user_id,
				"f2qu_user_name":r.name
			}
			chrome.extension.sendRequest({'msg':'save_user_info','f2qu_user_info':JSON.stringify(f2qu_user_info)})
			$('#now_account').html('<a class="now_account_a" href="http://'+f2qu_user_info.f2qu_user_id+'.42qu.com" target="_blank">'+f2qu_user_info.f2qu_user_name+'</a>')
		}else{
			$('#now_account').html('<a class="now_account_a" href="http://42qu.com/auth/login" target="_blank">未登录 , 请点此登录</a>')
		}
		shine($('#refresh')[0])
	})
}

function refresh_account(){
	chrome.extension.sendRequest(
		{'msg': 'refresh_account'},function(response){
			get_account()
		}
	);
}

</script>
<style>
.option_wrap{
width:700px;
margin:0 auto;
color:#666;
font-size:14px;
height:auto;
overflow:auto;
}
.option_head{
font-size:18px;
margin:22px 0 8px;
}
.option_line{
padding:8px 0;
}
p{
margin:0;
padding:0;
}
.option_line p{
margin-top:8px;
}
button{
background:#fff url(http://s4.42qu.us/img/png/btn.png);
color: #999;
padding:6px 14px;
display:inline-block;
font-size:14px;
border:1px solid #ccc;
cursor:pointer;
}
button:hover{
border-color:#aaa;
color:#000;
background:#f3f3f3 url(http://s4.42qu.us/img/png/btn.png) 0 30px;
}
#hint, #refresh{
color:#070;
margin-left:12px;
font-size:12px;
display:none;
}
.option_block{
float:left;
margin-left:28px;
}
#option_block{
margin-left:0;
border-right:1px dotted #ccc;
height:auto;
padding-right:28px;
}
.option_title{
margin:30px 0 16px;
color:#000;
font-size:18px;
}
.now_account{
font-size:14px;
margin-top:16px;
color:#666;
}
.now_account_a{
color:#02d;
text-decoration:none;
}
.now_account_a:hover{
color:#d20;
text-decoration:none;
}
</style>
</head>
<body onload="restore()">
<div class="option_wrap">
<p class="option_title">42区集图插件设置</p>
<div class="option_block" id="option_block">
<div class="option_head" >选项设置</div>
<div class="option_line">自动忽略小于以下尺寸的图片
<p><input type="radio" id="picsize1" name="picsize" value="80"><label for="picsize1">80 × 80</label></p>
<p><input type="radio" id="picsize2" name="picsize" value="100"><label for="picsize2">100 × 100</label></p>
<p><input type="radio" id="picsize3" name="picsize" value="120"><label for="picsize3">120 × 120</label></p>
</div>
<p class="option_line"><input type="checkbox" id="hidedirpic"><label for="hidedirpic">图片上方自动显示 "收集到42区" 按钮</label></p>
<p class="option_line"><input type="checkbox" id="showhow"><label for="showhow">图片上方显示 "拖拽图片 , 即可保存" 提示</label></p>
<br/>
<button onclick="save()">保存</button><span id="hint">保存成功</span>
</div>
<div class="option_block">
<div class="option_head">账号设置</div>
<div class="now_account">当前账号 : <span id="now_account"></span></div>
<button onclick="refresh_account()" style="margin:16px 0;">刷新账号</button><span id="refresh">刷新成功</span>
<p>绑定当前的42区帐号 ( 如果没有登录 , 自动取消关联 )</p>
</div>
</div>
</body>
</html>